<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8">
    <title>后台登录</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
            height: 100vh;
            overflow: hidden;
        }

        .container {
            display: flex;
            height: 100vh;
            align-items: center;
        }

        .left-panel {
            flex: 1;
            height: 100%;
            background: url('https://source.unsplash.com/random/800x600') no-repeat center center;
            background-size: cover;
            position: relative;
        }

        .left-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
        }

        .right-panel {
            width: 500px;
            height: 100%;
            background: rgba(255, 255, 255, 0.95);
            padding: 40px;
            display: flex;
            align-items: center;
        }

        .login-form {
            width: 100%;
        }

        .title {
            text-align: center;
            font-size: 24px;
            color: #333;
            margin-bottom: 30px;
            font-weight: bold;
        }

        .layui-form-item {
            margin-bottom: 25px;
        }

        .layui-input {
            height: 45px;
            padding-left: 40px;
            border-radius: 25px;
        }

        .layui-btn {
            height: 45px;
            border-radius: 25px;
            width: 100%;
        }

        .icon {
            position: absolute;
            left: 15px;
            top: 12px;
            color: #999;
            z-index: 1;
        }

        @media (max-width: 768px) {
            .left-panel {
                display: none;
            }
            .right-panel {
                width: 100%;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <div class="left-panel"></div>

    <div class="right-panel">
        <form class="login-form layui-form" action="">
            <h2 class="title">后台管理系统</h2>

            <div class="layui-form-item">
                <div class="layui-input-block" style="position: relative;">
                    <i class="layui-icon icon">&#xe66f;</i>
                    <input type="text" name="username" required lay-verify="required"
                           placeholder="用户名" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block" style="position: relative;">
                    <i class="layui-icon icon">&#xe673;</i>
                    <input type="password" name="password" required lay-verify="required"
                           placeholder="密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <button type="button" class="layui-btn layui-btn-fluid" onclick="login()">立即登录</button>
            </div>
        </form>
    </div>
</div>

<script src="layui/layui.all.js"></script>
<script>
    const $ = layui.$;
    const form = layui.form;
    const layer = layui.layer;
    function login(){
        let user={};
        user.name = $('input[name=username]').val();
        user.password = $('input[name=password]').val();
        $.ajax({
            //登陆操作
            url: 'sys/dologin',
            data: user,
            success: function (data) {
                if (data == "success") {
                    layer.msg("登陆成功", {icon: 6});
                    setTimeout(function () {
                        location.href = "sys/index";
                        // location.href = document.referrer || history.back();
                        // location.href = document.referrer || history.back();
                    }, 1200)
                } else {
                    layer.msg("登陆失败");
                }
            }
        })
    }

</script>

</body>
</html>
